import React from 'react';
import './Features.css';

interface Feature {
  icon: string;
  title: string;
  description: string;
  tag: string;
  gradient: string;
}

const Features: React.FC = () => {
  const features: Feature[] = [
    {
      icon: '🎨',
      title: '图片生成',
      description: '支持2K高清生成，所梦即所得',
      tag: '图片生成图片 3.01:1标清 1K',
      gradient: 'linear-gradient(45deg, #667eea, #764ba2)'
    },
    {
      icon: '🎬',
      title: '图片编辑',
      description: '支持多镜头及运镜，精准响应',
      tag: '多镜头及运镜',
      gradient: 'linear-gradient(45deg, #ff6b6b, #ff8e8e)'
    },
    {
      icon: '👤',
      title: '高清放大',
      description: '大师模式，虚拟人物栩栩如生',
      tag: '大师模式',
      gradient: 'linear-gradient(45deg, #4ecdc4, #44a08d)'
    },
    {
      icon: '🎭',
      title: '视频生成',
      description: '响应加倍灵动，跟随质量高',
      tag: '响应更灵动',
      gradient: 'linear-gradient(45deg, #f093fb, #f5576c)'
    }
  ];

  return (
    <section className="features" id="features">
      <div className="container">
        <h2 className="section-title">核心功能</h2>
        <div className="features-grid">
          {features.map((feature, index) => (
            <div 
              key={index} 
              className="feature-card fade-in-up"
              style={{ animationDelay: `${index * 0.2}s` }}
            >
              <div 
                className="feature-icon"
                style={{ background: feature.gradient }}
              >
                {feature.icon}
              </div>
              <h3>{feature.title}</h3>
              <p>{feature.description}</p>
              <span className="feature-tag">{feature.tag}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default Features;
